<template>
  <el-drawer :model-value="visible" title="房间预订管理" :size="mobile ? '100%' : 600" append-to-body lock-scroll @close="handleClose">
    <div class="primary-section room-header">
      <div class="font-w">朝花夕拾A101</div>
      <el-button type="primary" @click="bookVisible = true">添加预订</el-button>
    </div>
    <div>
      <div class="primary-section pv-12 mb10 cursor" v-for="(item, index) in bookedList" :key="index" @click="handleBookDetail(item)">
        <div class="font-w" style="font-size: var(--el-font-size-large);">{{ item.renterName }}</div>
        <div class="mt5">
          <span>预订周期：</span>
          <span>{{ item.startDate }} ~ {{ item.endDate }}</span>
        </div>
      </div>
    </div>
    <el-dialog title="添加预订" v-model="bookVisible" width="550px" :fullscreen="mobile">
      <el-form :model="bookForm" ref="bookFormRef" :rules="bookFormRules" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="renterName">
              <el-input v-model="bookForm.renterName" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="contacts">
              <el-input v-model="bookForm.contacts" placeholder="请输入联系方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="证件号" prop="idNumber">
              <el-input v-model="bookForm.idNumber" placeholder="请输入证件号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-icon class="mt10 ml10"><Wallet /></el-icon>
          </el-col>
          <el-col :span="24">
            <el-form-item label="入住周期" required>
              <el-row>
                <el-col :span="11">
                  <el-form-item label-width="0" prop="startDate">
                    <el-date-picker
                      v-model="bookForm.startDate"
                      :editable="false"
                      type="date"
                      placeholder="请选择开始日期"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div style="text-align: center;">-</div>
                </el-col>
                <el-col :span="11">
                  <el-form-item label-width="0" prop="endDate">
                    <el-date-picker
                      v-model="bookForm.endDate"
                      type="date"
                      :editable="false"
                      placeholder="请选择结束日期"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="primary-select">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="bookForm.remark" :rows="4" maxlength="150" placeholder="请填写备注信息" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleBookClose">取消</el-button>
          <el-button type="primary" @click="handleBookOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <BookDetail
      :visible="detailVisible"
      :bookInfoForm="bookItemInfo"
      @cancel="() => detailVisible = false"
      @linkto="handleBookDetailClose" />
  </el-drawer>
</template>
<script setup name="BookingManagement">
import useAppStore from '@/store/modules/app'
import BookDetail from './bookDetail.vue'

const proxy = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const bookVisible = ref(false)
const detailVisible = ref(false)
const bookedList = ref([])
const bookItemInfo = ref({})
const mobile = computed(() => useAppStore().device === 'mobile')
const data = reactive({
  bookForm: {
    renterName: undefined,
    contacts: undefined,
    idNumber: undefined,
    startDate: '',
    endDate: '',
    remark: undefined
  },
  bookFormRules: {
    renterName: [{ required: true, message: "请输入名字", trigger: "blur" }],
    contacts: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    startDate: [{ required: true, type: 'date', message: "请选择开始日期", trigger: "blur" }],
    endDate: [{ required: true, type: 'date', message: "请选择结束日期", trigger: ["blur"] }],
  }
})
const { bookForm, bookFormRules } = toRefs(data)

function handleBookDetail(item) {
  bookItemInfo.value = item
  detailVisible.value = true
}
function handleBookDetailClose() {
  detailVisible.value = false
  emit('cancel')
}

function handleBookClose() {
  bookVisible.value = false
}
function handleBookOk() {
  proxy.refs['bookFormRef'].validate(valid => {
    if (valid) {
      bookedList.value.push({
        ...bookForm.value
      })
      bookVisible.value = false  
    }
  })
}

function handleClose() {
  emit('cancel')
}
</script>
<style lang="scss" scoped>
.room-header {
  margin-left: -20px;
  margin-right: -20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.cursor {
  cursor: pointer;
}
</style>